<template>
  <div id="notes">
    <Collapse v-model="value1">
      <Panel name="1" v-if="$route.query.expType != 2">
        视频笔记
        <p slot="content">
          <template>
            <!-- <div class="notePanel" v-for="(video,index) of videoNotesList" :key="index">
							<div class="noteBar">  
								<span class="noteState">
									{{video.creatorName}}                 
								</span>
								<span style="margin-right:20px">时间：{{video.createTime}}</span>
								<Poptip style="margin-right:10px"
									confirm
									title="确认删除？"
									@on-ok="delVideoNote(video.id)">
									<Button type="error" ghost size="small"> 删除 </Button>
								</Poptip>                
							</div>
							<quill-editor
								v-model="video.handlerContent"
								class="editor" 
								ref="myQuillEditor"
								:options="editorOption"
								@blur="onEditorFocus($event)"
								@focus="onEditorFocus($event)"
								@ready="onEditorFocus($event)"
								>
							</quill-editor> 
						</div> -->
            <div class="noteList">
              <ul v-if="videoNotesList.length">
                <li v-for="n in videoNotesList" :key="n.id">
                  <h4
                    v-if="n.noteAnchor.imageUrl"
                    :title="n.title"
                    class="achorTitle"
                  >
                    {{ n.title }}
                  </h4>
                  <div class="showArea">
                    <section>
                      <span>{{ n.creatorName }}</span>
                    </section>
                    <span v-if="n.noteAnchor.imageUrl" class="timestamp">
                      <Icon type="md-flag" />
                      {{ timestampToString(n.noteAnchor.currentTime) }}</span
                    >
                  </div>
                  <div class="noteArea">
                    <quill-editor
                      v-model="n.noteContent"
                      @focus="onEditorFocus($event)"
                      class="editorShow"
                      :options="editorOption"
                    ></quill-editor>
                  </div>
                  <div class="oprateArea">
                    <span>{{ handerTimeDiff(n.createTime) }}</span>
                    <section>
                      <Poptip
                        confirm
                        title="确实要删除该条标记吗?"
                        :transfer="true"
                        @on-ok="delVideoNote(n.id)"
                      >
                        <Button ghost type="error" size="small">删除</Button>
                      </Poptip>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
            <Page
              :total="videoTotal"
              show-elevator
              show-sizer
              showTotal
              style="text-align: center"
              @on-change="videoChangePage"
              :transfer="true"
              @on-page-size-change="videoChangeSize"
              v-if="videoNotesList.length > 0"
            />
          </template>
          <template v-if="showVideoDefImg">
            <no-data></no-data>
          </template>
        </p>
      </Panel>
      <Panel name="2">
        文本笔记
        <p
          slot="content"
          style="
            max-height: 300px;
            overflow: auto;
            padding-right: 10px;
            padding-left: 16px;
          "
        >
          <template v-if="showDataList">
            <div v-for="(note, index) in notesList" :key="index">
              <p>
                {{ note.creatorName }}
                <span style="float: right">
                  <Poptip confirm title="确认删除？" @on-ok="delNote(note.id)">
                    <Button type="error" ghost size="small"> 删除 </Button>
                  </Poptip>
                </span>
              </p>
              <p style="margin-top: 10px">{{ note.content }}</p>
              <p style="color: #bbb; margin-top: 6px">
                时间:{{ note.createTime }}
              </p>
              <Divider dashed style="padding: 10px"></Divider>
            </div>
            <Page
              :total="total"
              show-elevator
              show-sizer
              showTotal
              style="text-align: center"
              @on-change="changePage"
              :transfer="true"
              @on-page-size-change="changeSize"
              v-if="total > 0"
            />
          </template>
          <template v-if="showDefImg">
            <no-data></no-data>
          </template>
        </p>
      </Panel>
    </Collapse>
  </div>
</template>
<script>
import Quill from "quill";
import { quillEditor } from "vue-quill-editor"; // 调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { escape2Html } from "@/libs/utils";
import { timestampToString } from "@/libs/utils";
import Moment from "moment";
import { Base64 } from "js-base64";
let Embed = Quill.import("blots/embed");
class TimestampEmbed extends Embed {
  static create(value) {
    // 
    // if(!value.timestamp) return
    let node = super.create();
    node.setAttribute("videoUrl", value.videoUrl);
    node.setAttribute("videoName", value.videoName);
    node.setAttribute("innerText", value.innerText);
    node.setAttribute("timestamp", value.timestamp);
    node.innerHTML = `<div contenteditable="false" onClick="getVideoTime(${value.timestamp})"><i class="ivu-icon ivu-icon-md-flag"></i><span class="time-tag-item">${value.innerText}</span></div>`;
    return node;
  }

  static value(node) {
    return {
      videoUrl: node.getAttribute("videoUrl"),
      videoName: node.getAttribute("videoName"),
      innerText: node.getAttribute("innerText"),
      timestamp: node.getAttribute("timestamp"),
    };
  }
}
TimestampEmbed.blotName = "imageEmbed";
TimestampEmbed.className = "timestamp-embed";
TimestampEmbed.tagName = "div";
Quill.register(TimestampEmbed);
const toolbarOptions = [
  // [{ size: ["small", false, "large", "huge"] }],  //字体大小
  // ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  // [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  // ["image"],
  // ['screenshot'],
  // ['timestamp'],
  // ['preservation']
];

import { delNotes, getNotesList } from "@/api/selfStudy/courseExp.js";
export default {
  name: "expNotes",
  components: {quillEditor },
  props: ["experInfo"],
  data() {
    return {
      value1: "2",
      notesInfo: {
        companyId: "",
        content: "",
        courseId: this.$route.query.classId,
        experimentId: "",
        level: 5,
      },
      //文本笔记
      total: 0,
      notesList: [],
      queryNotesInfo: {
        pageIndex: 1,
        pageSize: 10,
        type: 1,
      },
      showDataList: true,
      showDefImg: false,
      //视频笔记
      queryVideoNotesInfo: {
        pageIndex: 1,
        pageSize: 10,
        type: 2,
      },
      videoNotesList: [],
      videoTotal: 0,
      editorOption: {
        modules: {
          // toolbar: {
          //     container:toolbarOptions,//工具菜单栏配置
          // },
          toolbar: false,
        },
      },
      showVideoDataList: true,
      showVideoDefImg: false,
    };
  },
  mounted() {
    this.notesInfo.companyId = this.experInfo.companyId;
    if (this.$route.name == "experdetails") {
      this.notesInfo.experimentId = this.experInfo.ecid;
      this.queryNotesInfo.experimentId = this.experInfo.ecid;
      this.queryVideoNotesInfo.experimentId = this.experInfo.ecid;
    } else if (this.$route.name == "coursedetails") {
      this.notesInfo.courseId = this.experInfo.ccid;
      this.queryNotesInfo.courseId = this.experInfo.ccid;
      this.queryVideoNotesInfo.courseId = this.experInfo.ccid;
    }
    this.getNotesList();
    this.getVideoNotesList();
  },
  methods: {
    timestampToString(time) {
      return timestampToString(time);
    },
    //编辑器不可修改
    onEditorFocus(event) {
      event.enable(false);
    },
    timestampToString(time) {
      return timestampToString(time);
    },
    //时间处理
    handerTimeDiff(time) {
      let timeStr = Moment().diff(Moment(time), "seconds");
      if (timeStr <= 24 * 60 * 60) {
        let h = parseInt(timeStr / 60 / 60);
        let m = parseInt(timeStr / 60);
        let s = timeStr;
        if (h) {
          return `${h}小时前`;
        } else if (m) {
          return `${m}分钟前`;
        } else {
          return `${s}秒前`;
        }
      } else {
        return time;
      }
    },
    addNotes() {
      addNotes(this.notesInfo)
        .then((data) => {
          if (data.code == 1) {
            this.getNotesList();
          } else {
          }
        })
        .catch((error) => {});
    },
    //获取视频笔记
    getVideoNotesList() {
      getNotesList(this.queryVideoNotesInfo)
        .then((data) => {
          if (data.code == 1) {
            const datas = data.data.items;
            datas.forEach((note) => {
              note.content = Base64.decode(note.content);
              try {
                const content = JSON.parse(note.content);
                note.noteContent = escape2Html(content.noteContent);
                note.noteAnchor = content.noteFlag;
                //note.noteAchor.title = note.title;
              } catch (err) {
                note.noteContent = escape2Html(note.content);
                note.noteAnchor = {};
              }
              // try{
              // 	// item.handlerContent = JSON.parse(content).noteContent
              // }catch(err){
              // 	// item.handlerContent = content
              // }
            });
            this.videoNotesList = datas;
            this.videoTotal = data.data.total;
            if (this.videoNotesList.length > 0) {
              this.showVideoDataList = true;
              this.showVideoDefImg = false;
            } else {
              this.showVideoDataList = false;
              this.showVideoDefImg = true;
            }
            this.EscapeNote(this.videoNotesList);
            // console.log(this.videoNotesList);
          } else {
            this.videoNotesList = [];
          }
        })
        .catch((error) => {});
    },
    EscapeNote(list) {
      for (var i = 0; i < list.length; i++) {
        list[i].content = escape2Html(list[i].content);
      }
    },
    //获取文本笔记
    getNotesList() {
      getNotesList(this.queryNotesInfo)
        .then((data) => {
          if (data.code == 1) {
            this.notesList = data.data.items;
            this.total = data.data.total;
            if (this.notesList.length > 0) {
              this.showDataList = true;
              this.showDefImg = false;
            } else {
              this.showDataList = false;
              this.showDefImg = true;
            }
          } else {
            this.notesList = [];
          }
        })
        .catch((error) => {});
    },
    delNote(id) {
      delNotes(id)
        .then((data) => {
          if (data.code == 1) {
            this.getNotesList();
            this.$Message.info('删除成功');
          } else {
            this.$message.error(data.message);
          }
        })
        .catch((error) => {});
    },
    delVideoNote(id) {
      delNotes(id)
        .then((data) => {
          if (data.code == 1) {
            this.getVideoNotesList();
            this.$Message.info('删除成功');
          } else {
            this.$message.error(data.message);
          }
        })
        .catch((error) => {});
    },
    //视频笔记分页
    videoChangePage(page) {
      this.queryVideoNotesInfo.pageIndex = page;
      this.getVideoNotesList();
    },
    videoChangeSize() {
      this.queryVideoNotesInfo.pageSize = size;
      this.getVideoNotesList();
    },
    //文本笔记分页
    changePage(page) {
      this.queryNotesInfo.pageIndex = page;
      this.getNotesList();
    },

    changeSize(size) {
      this.queryNotesInfo.pageSize = size;
      this.getNotesList();
    },
  },
};
</script>
<style scoped>
.achorTitle {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 140px;
}
.noteListTitle {
  color: #18191c;
  margin: 5px;
}
.noteList {
  overflow-y: auto;
  height: calc(100% - 40px);
  max-height: 300px;
}
.noteList ul {
  padding: 10px;
  list-style: none;
}
.noteList h4 {
  color: #aaa;
}
.noteList .editorDiv2 {
  width: 100%;
  height: auto;
}
.noteList .quill-editor.editorList {
  height: auto;
}
.noteList .quill-editor.editorShow {
  height: auto;
}
.noteList ul li {
  margin-bottom: 14px;
  color: #18191c;
  display: flex;
  flex-direction: column;
}
.noteList .timestamp {
  border-radius: 5px;
  padding: 0 5px;
  background: #f6f7f8;
  color: #18191c;
  cursor: pointer;
}
.noteList ul li .showArea,
.noteList ul li .oprateArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
}
/* .noteList ul li .oprateArea{
    padding-bottom: 15px;
    margin-bottom: 15px;
border-bottom:1px solid #eee;
} */
.noteList ul li .showArea > section {
  display: flex;
  align-items: center;
}
.noteList ul li .showArea > section > img {
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: auto;
  margin-right: 8px;
}
.noteList ul li:last-of-type {
  margin-bottom: 0;
}
#notes {
  height: 100%;
  font-size: 14px;
}
/* 笔记面板样式 */
.notePanel {
  margin-top: 10px;
  width: 100%;
  height: 100%;
}
.notePanel .noteBar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  align-items: center;
  background-color: #dddde7;
  color: #000;
}
.noteState {
  width: 180px;
  margin-left: 10px;
}
.noteButton {
  text-align: center;
  width: 45px;
  height: 38px;
  font-size: 16px;
  margin-right: 20px;
  position: relative;
}
.noteButton span {
  display: none;
}
.noteButton:hover span {
  display: block;
  position: absolute;
  top: 40px;
  left: -40px;
  width: 80px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  text-align: center;
}
.ivu-icon {
  font-size: 20px !important;
}
.ivu-icon-ios-camera {
  font-size: 20px !important;
}
.ivu-icon-ios-folder:hover {
  color: #89d3ec;
}
.quill-editor {
  width: 100%;
  height: 250px;
  color: #000;
  /* margin-bottom: 50px; */
}
/* 时间戳样式 */
.editor /deep/ .timestamp-embed {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px 20px;
}
.editor /deep/ .timestamp-embed div {
  cursor: pointer;
  transition: 0.2s;
  background: #f6f7f8;
  border-radius: 4px;
  height: auto;
  line-height: 20px;
  display: inline-block;
  padding: 3.5px 10px 3.5px 5px;
  font-size: 14px;
  font-weight: 700;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor /deep/ .timestamp-embed div .ivu-icon-md-flag {
  font-size: 16px;
  font-style: normal;
}
.editor /deep/ .timestamp-embed div:hover {
  border: 1px solid black;
}
.editor /deep/ .timestamp-embed .time-tag-item {
  font-size: 14px;
  line-height: 20px;
  color: #18191c;
  font-weight: 400;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
</style>